<template>
  <div>
    <el-dialog :visible.sync="postshow" title="岗位管理" width="40%">
      <el-container class="allpage">
        <el-container>
          <el-header class="tabletitle">
            <span>岗位表</span>

            <el-button-group style="margin-left: 15px">
              <el-button @click="addpost" type="success" icon="el-icon-plus"
                >新增
              </el-button>

              <el-button
                @click="getpost(selecarr)"
                type="warning"
                icon="el-icon-refresh"
                >刷新
              </el-button>
            </el-button-group>

     
          </el-header>

          <!-- 人员信息表-->
          <el-input 
              placeholder="请输入内容"
              style="margin-top:20px"
              v-model="search"
              class="input-with-select"
              @keyup.enter.native="searchpost"
            >
              <el-button slot="append" icon="el-icon-search" @click="searchpost"></el-button>
            </el-input>

          <el-table
            :data="tableData"
            border
            style="width: 100%;margin-top: 10px;"
            :header-cell-style="{ background: '#58B7FF', color: '#ffffff' }"
          >
            <el-table-column fixed="left" prop="key" label="编号" width="50">
            </el-table-column>
            <el-table-column fixed="left" prop="value" label="岗位">
            </el-table-column>

            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" @click="editpost(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="deletepost(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-container>
      </el-container>
    </el-dialog>

    <el-dialog
      title="岗位信息"
      :visible.sync="postadd"
      width="40%"
      left
      :append-to-body="true"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="岗位">
          <el-input v-model="form.value" style="width: 100%"></el-input>
        </el-form-item>

        <el-form-item v-if="isadd">
          <el-button type="primary" @click="postpost(0)" style="width: 100%"
            >新增</el-button
          >
        </el-form-item>

        <el-form-item v-if="!isadd">
          <el-button type="primary" @click="postpost(1)" style="width: 100%"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
  <style>
.tabletitle {
  max-height: 30px;
  font-size: 25px;
  color: #409eff;
}
.el-aside {
  color: #333;
  background-color: rgb(255, 255, 255);
}
.allpage {
  height: 100%;
}
</style>
  
  <script>
export default {
  data() {
    return {
      // table所需数据
      tableData: [], // 总数据

      postshow: false,

      postadd: false,

      form: [],

      isadd: "",

      selecarr: [],

      search:"",
    };
  },

  created() {
    this.getpost();
  },

  methods: {
    searchpost(){
      let datas = {
        search: this.search,
      };
      console.log(this.search)
      this.$axios
        .post("api/member/searchpost", datas)
        .then((response) => {
          this.$message({
            message: "成功",
            type: "success",
          });
          this.tableData = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });

    },

    async getpost() {
      this.$axios
        .post("api/member/getpost")
        .then((response) => {
          this.tableData = response.data;
        })

        .catch(function (error) {
          console.log(error);
        });
    },

    addpost() {
      this.postadd = true;
      this.isadd = true;
      this.eduform = [];
    },

    editpost(row) {
      this.postadd = true;
      this.isadd = false;
      this.form = row;
      console.log(row);
    },

    async postpost(type) {
      let datas = {
        type: type,
        post: this.form.value,
        id:this.form.key,
      };
      console.log(this.form);
      this.$axios
        .post("api/member/postpost", datas)
        .then((response) => {
          this.$message({
            message: response.data.msg,
            type: "success",
          });
          // if (response.data.msg == "岗位信息添加成功") {
          //   this.tableData.push({
          //     id: response.data.id,
          //     depid: this.form.depid,
          //     post: this.form.post,
          //     rank: this.form.rank,
          //     num: this.form.num,
          //   });
          // }
          this.postadd = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    async deletepost(index, row) {
      this.$confirm("是删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let datas = {
            id: row.key,
          };
          this.$axios
            .post("api/member/deletepost", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
              });
              this.form.splice(index, 1);
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
  